<template>
  <div class="receipt">
    <!-- 拿到小票数据列表 --仅作展示-->
    <div v-for="(v, index) in propData">
      <div class="basic">
        <!-- 是列表第一个且前几项都不展示时的时候不展示 下划线 -->
        <div class="divider" v-show="shouldShowDivider(v, index)"></div>
        <!-- 每项数据的标题 不展示页头 页尾-->
        <!-- <div v-show="shouldShowTitle(v)" class="title_name1">
          {{ v.sectionTitle }}
        </div> -->
        <!-- 遍历每项数据， 展示内容 -->
        <div v-for="(item, index2) in v.fieldList" class="text_1">
          <!-- 页头数据 -->
          <div v-show="isPageHeadItem(v, item)" style="margin-bottom: 2px">
            <!-- 示例油站 -->
            <div
              class="top_title"
              :class="{ title_name: item.fieldName == 'receiptTypeName' }"
            >
              {{ item.example }}
            </div>
          </div>
          <!-- 其他内容展示数据 -->
          <div v-show="shouldShowItem(v, item, 0)" :class="getItemClass(item)">
            {{ item.fieldTitle + ": " + item.example }}
          </div>
          <!-- 输入框内容展示 -->
          <div v-show="shouldShowItem(v, item, 1)" class="div_center">{{ item.fieldCustomContent }}
          </div>
          <!-- 页尾下划线 -->
          <div
            class="divider2"
            v-if="shouldShowDivider2(v, item, index2)"
          ></div>
        </div>
        <div style="margin-bottom: 3px"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ReceiptTab",
  props: {
    titleName: String,
    activeName: {
      default: "bj",
    },
    dataList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      font_weight: ["gunName", "oilName", "amt"],
      propData: this.dataList,
    };
  },
  watch: {
    dataList: {
      handler(newVal) {
        this.propData = newVal;
        // this.showInfo = this.dataList[0];
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 是否展示下划线
    shouldShowDivider(section, index) {
      let isAllDisabled = true;
      //当全面全部没有选中时 第一条虚线不展示
      for (let i = 0; i < index; i++) {
        if (this.propData[i].printEnabled) {
          isAllDisabled = false;
          break;
        }
      }
      return section.printEnabled && index !== 0 && !isAllDisabled ;
    },
    shouldShowDivider2(v, item, index) {
      const length = v.fieldList.length;
      const lastIndex = length - 1;
      // 检查当前项后面的所有项是否都未选中
      for (let i = index + 1; i < length; i++) {
        if (v.fieldList[i].printEnabled) {
          // 如果后面有任一项被选中，则显示分隔线
          return (
            item.printEnabled &&
            index !== lastIndex &&
            v.sectionName === "pageTail" &&
            v.printEnabled
          );
        }
      }
      return false;
    },
    // 是否展示小标题
    shouldShowTitle(section) {
      return (
        section.printEnabled &&
        section.sectionName !== "pageHead" &&
        section.sectionName !== "pageTail"
      );
    },
    // 是否展示页头
    isPageHeadItem(v, item) {
      return (
        v.printEnabled == 1 &&
        item.printEnabled === 1 &&
        item.sectionName === "pageHead"
      );
    },
    // 内容展示逻辑
    shouldShowItem(section, item, val) {
      return (
        section.printEnabled === 1 &&
        item.printEnabled === 1 &&
        section.sectionName !== "pageHead" &&
        (val !== 1 ? item.customFlag !== 1 : item.customFlag === val)
      );
    },
    // 内容样式展示逻辑
    getItemClass(item) {
      return {
        font_18: this.font_weight.includes(item.fieldName),
        font_22: item.fieldName === "receivableAmt",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.font_18 {
  font-size: 18px;
  font-weight: 700;
}
.font_22 {
  font-size: 22px;
  font-weight: 700;
}
.text_1 {
  line-height: 1.5;
  font-size: 16px;
}
.receipt {
  height: 100%;
  width: 100%;
  white-space: normal;
  overflow-y: auto; /* 超出部分隐藏 */
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  word-break: normal;
}
.top_title {
  text-align: center;
  font-size: 24px;
  line-height: 1.5;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出内容用省略号表示 */
}
.title_name {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}
.title_name1 {
  font-size: 16px;
  line-height: 2;
  font-weight: 700;
}
.receipt {
  height: 100%;
  width: 100%;
  white-space: normal;
  overflow-y: auto; /* 超出部分隐藏 */
  display: flex;
  flex-direction: column;
}
.el-tabs {
  border: none;
}
.divider {
  margin: 5px 0;
  height: 1px;
  border-bottom: 1px dashed black;
}
.divider2 {
  margin: 5px 0;
  height: 1px;
  border-bottom: 1px dashed black;
}
.div_center {
  margin-top: 0.2rem;
  text-align: left;
  white-space: pre-wrap;
}
</style>
